<!--==========================HTML==========================-->
<template>
  <div class="root-container">
    <!-- 侧边栏 -->
    <div class="side-menu-container"><Sidebar/></div>
    <!-- 右侧内容区 -->
    <div class="app-main-container">
      <div class="nav">
        <Navbar />
      </div>
      <div class="appmain">
        <app-main><Table/></app-main>
      </div>
    </div>
    <el-backtop />
  </div>
</template>
<!--===========================JS===========================-->
<script setup lang="ts">
import Navbar from "../comm/Navbar.vue";
import Sidebar from '../comm/Sidebar.vue';
import Table from '../comm/Table.vue';

</script>
<!--===========================CSS==========================-->
<style scoped>
.root-container {
  display: grid;
  grid-template: 100% / 1fr 4fr;
  position: relative;
  height: 100%;
  width: 100%;
}
.side-menu-container {
  grid-column: 1/2;
}
.app-main-container {
  display: flex;
  flex-direction: column;
  align-items: top;
  grid-column: 2/2;

}

</style>
